<template>
    <div class="container" style="width:99%;margin-top:-25px;">
	<!-- 查询条件 -->
    <div class="query-box">
        <el-form :model="ResetFrom" status-icon ref="ResetFrom">
          <el-row>
            <!-- <el-col :span="4">
              <div class="depart-box">
                  <div class="slect-title">用户名</div>
                  <el-form-item prop="threeLevelDepartment" >
                      <el-select clearable v-model="ResetFrom.userName" filterable>
                        <el-option
                          v-for="item in userList"
                          :key="item.id"
                          :label="item.userName"
                          :value="item.userName">
                        </el-option>
                      </el-select>
                </el-form-item>
              </div>
            </el-col> -->
            <!-- <el-col :span="4">
              <div class="depart-box">
                  <div class="slect-title">真实姓名</div>
                  <el-form-item prop="threeLevelDepartment" >
                      <el-select clearable v-model="ResetFrom.realName" filterable>
                        <el-option
                          v-for="item in userList"
                          :key="item.id"
                          :label="item.realName"
                          :value="item.realName">
                        </el-option>
                      </el-select>
                </el-form-item>
              </div>
            </el-col> -->
            <el-col :span="4">
                <el-form-item label="" prop="phone">
                <el-input v-model="ResetFrom.stuName" placeholder="请输入客户姓名">
                    <template slot="prepend">客户姓名</template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
                <el-form-item label="" prop="phone">
                <el-input v-model="ResetFrom.stuPhone" placeholder="请输入电话">
                    <template slot="prepend">联系电话</template>
                </el-input>
              </el-form-item>
            </el-col>
            <!-- <el-col :span="4">
              <div class="depart-box">
                  <div class="slect-title">三级部门</div>
                  <el-form-item prop="threeLevelDepartment" >
                      <el-select clearable v-model="ResetFrom.threeDeptId" @change="departmentSetValue" filterable>
                        <el-option
                          v-for="item in threeDept"
                          :key="item.id"
                          :label="item.deptName"
                          :value="item.id">
                        </el-option>
                      </el-select>
                </el-form-item>
              </div>
            </el-col> -->
            <el-col :span="4" v-if='!this.$route.query.stuType'>
              <div class="depart-box">
                  <div class="slect-title">客户类型</div>
                  <el-form-item prop="threeLevelDepartment" >
                      <el-select clearable v-model="ResetFrom.stuType"  filterable>
                        <el-option
                          v-for="item in student_type_options"
                          :key="item.key"
                          :label="item.value"
                          :value="item.key">
                        </el-option>
                      </el-select>
                </el-form-item>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span='7'>
              <div class="depart-box">
                  <div class="slect-title">流转时间</div>
                    <el-date-picker
                      v-model="EstablishTime"
                      type="daterange"
                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                      :default-time="['00:00:00', '23:59:59']"
                      value-format="yyyy-MM-dd HH:mm:ss"
                      format="yyyy-MM-dd HH:mm:ss">
                    </el-date-picker>
                </div>
            </el-col>
          </el-row>
        </el-form>
        <div class="from-btns">
            <kt-button :label="$t('action.reset')" perms="true" type="primary" @click="reset('ResetFrom')"/>
            <kt-button :label="$t('action.search')" perms="true" type="primary" @click="search"/>
        </div>
    </div>
    <!-- <div class="fl" v-loading="loading">
      <p style="margin-left:20px">流转资源总量共计：<span class="red">{{totalCount}}</span>个，其中A类<span class="red">{{countA}}</span>个，B+类<span class="red">{{countB}}</span>个，B-类：<span class="red">{{countB1}}</span>个，C类：<span class="red">{{countC}}</span>个</p>
    </div> -->
	<!--表格内容栏-->
  <StTable class="table-width" :showBatchDelete='false' :loading='loading'
		:data="pageResult" :columns="columns" @findPage="findPage">
	</StTable>

  </div>
</template>
<script>
import PopupTreeInput from "@/components/PopupTreeInput";
import KtButton from "@/views/Core/KtButton";
import StTable from "@/views/Core/StTable";
import api from "@/http/api";
import CrmSwitch from "@/views/Core/CrmSwitch";
import axios from 'axios'
import { baseUrl } from '@/utils/global'
import Cookies from "js-cookie";
export default {
  name: "Student",
  components: {
    PopupTreeInput,
    StTable,
    KtButton,
    CrmSwitch
  },
  data() {
    return {
      size: "small",
      filters: {
        name: ""
      },
      pageResult:{
        content:[]
      },
      // 查询条件
      ResetFrom: {
        userName: "",
        userid:"",
        realName:"",
        phone:"",
        threeLevelDepartment:"",
        DateTime:"",
        dateEnd:"",
        dateStart:"",
        pageNum:0,
        pageSize:0,
        listUserId:[],
        stuType:''
      },
      EstablishTime:[],
      threeDept:'',
      columns: [
        { type:'index', label: "序号", minWidth: 50 },
        { prop: "stuName", label: "客户姓名", minWidth: 80 },
        { prop: "stuPhone", label: "联系电话", minWidth: 80 },
        { prop: "stuType", label: "客户类型", minWidth: 80 },
        { prop: "userName", label: "咨询师", minWidth: 80 },
        { prop: "recycleDate", label: "流转时间", minWidth: 80 },
      ],

      pageRequest: { pageNum: 1, pageSize: 30 },
      deptId: Cookies.get("threeLevelDeptId"),
      loading: false, // 加载标识
      userList:[],
      totalCount:'',
      countA:'',
      countB:'',
      countB1:'',
      countC:'',
    };
  },
  methods: {
    // 获取分页数据
    findPage: function(data) {
      if (data !== null) {
        this.loading=true
        this.pageRequest = data.pageRequest;
      }

      this.ResetFrom.pageSize = this.pageRequest.pageSize;
      this.ResetFrom.pageNum = this.pageRequest.pageNum;
      if(this.$route.query.userId){
        this.ResetFrom.userId=this.$route.query.userId
      }
      if(this.$route.query.stuType){
        this.ResetFrom.stuType=this.$route.query.stuType
      }
      this.$api.student
        .queryRecycleDetailList(this.ResetFrom)
        .then(res => {
          //以下3个返回参数，需要根据自己业务去判断，处理返回信息
          let result = res.result;       //执行结果
          let errorCode = res.errorCode; //错误编码
          let msg = res.msg;             //返回消息

          let content = {'content':res.data,'totalSize':res.total};
          this.pageResult=content;
          this.loading=false
          //this.findUserRoles();
        })
        .then(data != null ? data.callback : "");
    },
    // 加载用户角色信息
    findUserRoles: function() {
      this.$api.role.findAll().then(res => {
        // 加载角色集合
        this.roles = res.data;
      });
    },
    //三级部门改变时，给对应的三级部门ID的参数赋值
    departmentSetValue:function(selVal){
      this.ResetFrom.threeLevelDepartment=selVal;
    },
    // 获取部门列表
    findDeptTree: function() {
      // this.$api.dept.findDeptTree().then(res => {
      //   this.deptData = res.data;
      // });
      this.student_type_options = JSON.parse(
          localStorage.getItem("stdentTpye")
      );
    },
    // 菜单树选中
    deptTreeCurrentChangeHandle(data, node) {
      this.dataForm.deptId = data.id;
      this.dataForm.deptName = data.name;
    },
    // 菜单树选中
    handleOptionClick() {},
    // 重置
    reset(ResetFrom){
      this.$refs.ResetFrom.resetFields();
      this.EstablishTime = "";
      this.ResetFrom.userName = "";
      this.ResetFrom.realName = "";
      this.ResetFrom.stuPhone = "";
      this.ResetFrom.threeDeptId = "";
      this.ResetFrom.recycleStartDate = "";
      this.ResetFrom.recycleEndDate=""
      this.ResetFrom.stuType=''
      this.pageRequest.pageNum = 1;
      this.findPage(null);
    },
    // 查询
    search(){
      this.ResetFrom.recycleStartDate=this.EstablishTime[0]
      this.ResetFrom.recycleEndDate=this.EstablishTime[1]
      this.loading=true
      this.pageRequest.pageNum = 1;
      this.findPage(null);
    },
    // 获取三级部门
    get_dept_data() {
      this.$api.dropdown.deptLevel3({deptType:1}).then(res => {
        this.threeDept = res.departmentInfoList;
      });
    },
    // 获取用户名
    get_user_name(){
      this.$api.dropdown.users({ userType: 3,deptType:1}).then(res => {
        if(res.result==1){
          this.userList=res.userInfoList
        }
      });
    },
    // 用户名
    querySearchAsync(queryString, callback) {
      let restaurants = [{}];
      let results = "";
      let threeId=JSON.parse(Cookies.get("threeLevelDeptId"))
      if(threeId==null){
        this.$api.dropdown.users({ userType: 3,deptType:1}).then(res => {
          for (let i of res.userInfoList) {
            i.value = i.userName; //将想要展示的数据作为value
          }
          restaurants = res.userInfoList;
          results = queryString
            ? restaurants.filter(this.createFilter(queryString))
            : restaurants;
          callback(results);
        });
      }else{
        this.$api.dropdown.users({ userType: 3,deptType:1}).then(res => {
          for (let i of res.userInfoList) {
            i.value = i.userName; //将想要展示的数据作为value
          }
          restaurants = res.userInfoList;
          results = queryString
            ? restaurants.filter(this.createFilter(queryString))
            : restaurants;
          callback(results);
        });
      }
      
    },
    createFilter(queryString) {
      return restaurant => {
        return (
          restaurant.userName
            .toLowerCase()
            .indexOf(queryString.toLowerCase()) === 0
        );
      };
    },
    handleSelect(item) {
      this.ResetFrom.userName = item.userName;
    }
  },
  mounted() {
    this.findDeptTree();
    // this.get_dept_data()
    // this.get_user_name()
  }
};
</script>
<style >
@import url("../../assets/queryBox.css");
.red{
  color: red;
}
</style>
<style scope>
.add-btns .el-button:nth-child(1) {
  margin-right: 10px;
}
</style>

